Резултат от Hit Test в WebXR: Обработка на резултатите от Ray Casting за потапящи преживявания

WebXR Device API отваря вълнуващи възможности за създаване на потапящи преживявания с добавена реалност (AR) и виртуална реалност (VR) директно в браузъра. Един от основните аспекти при изграждането на интерактивни WebXR приложения е разбирането и ефективното използване на резултатите от hit test. Тази блог публикация предоставя подробно ръководство за обработка на резултатите от hit test, получени чрез ray casting, което ще ви позволи да създавате интуитивни и ангажиращи потребителски взаимодействия във вашите WebXR сцени.

Какво е Ray Casting и защо е важен в WebXR?

Ray casting е техника, използвана за определяне дали лъч, излизащ от определена точка и посока, се пресича с обекти в 3D сцена. В WebXR, ray casting обикновено се използва за симулиране на погледа на потребителя или траекторията на виртуален обект. Когато лъчът се пресече с повърхност от реалния свят (в AR) или с виртуален обект (във VR), се генерира резултат от hit test.

Резултатите от hit test са от решаващо значение по няколко причини:

• Поставяне на виртуални обекти: В AR, hit test-овете ви позволяват да поставяте точно виртуални обекти върху повърхности от реалния свят, като маси, подове или стени.
• Потребителско взаимодействие: Чрез проследяване накъде гледа или сочи потребителят, hit test-овете позволяват взаимодействия с виртуални обекти, като например тяхното избиране, манипулиране или активиране.
• Навигация: Във VR среди, hit test-овете могат да се използват за внедряване на навигационни системи, позволяващи на потребителите да се телепортират или да се движат из сцената, като сочат към конкретни места.
• Откриване на сблъсъци: Hit test-овете могат да се използват за основно откриване на сблъсъци, определяйки кога виртуален обект се сблъсква с друг обект или с реалния свят.

Разбиране на WebXR Hit Test API

WebXR Hit Test API предоставя необходимите инструменти за извършване на ray casting и получаване на резултати от hit test. Ето разбивка на ключовите концепции и функции:

XRRay

XRRay представлява лъч в 3D пространството. Той се дефинира от начална точка и вектор на посоката. Можете да създадете XRRay, като използвате метода XRFrame.getPose(), който връща позата на проследяван източник на въвеждане (напр. главата на потребителя, ръчен контролер). От позата можете да извлечете началото и посоката на лъча.

XRHitTestSource

XRHitTestSource представлява източник на резултати от hit test. Вие създавате източник за hit test, като използвате метода XRSession.requestHitTestSource() или XRSession.requestHitTestSourceForTransientInput(). Първият метод обикновено се използва за непрекъснат hit testing, базиран на постоянен източник, като позицията на главата на потребителя, докато вторият е предназначен за краткотрайни събития на въвеждане, като натискане на бутони или жестове.

XRHitTestResult

XRHitTestResult представлява единична точка на пресичане между лъча и повърхност. Той съдържа информация за пресичането, като разстоянието от началото на лъча до точката на удар и позата на точката на удар в референтното пространство на сцената.

XRHitTestResult.getPose()

Този метод връща XRPose на точката на удар. Позата съдържа позицията и ориентацията на точката на удар, които могат да се използват за поставяне на виртуални обекти или извършване на други трансформации.

Обработка на резултатите от Hit Test: Ръководство стъпка по стъпка

Нека разгледаме процеса на получаване и обработка на резултатите от hit test в WebXR приложение. Този пример предполага, че използвате библиотека за рендиране като three.js или Babylon.js.

1. Заявяване на източник за Hit Test

Първо, трябва да заявите източник за hit test от XRSession. Това обикновено се прави след стартиране на сесията. Ще трябва да посочите координатната система, в която искате да бъдат върнати резултатите от hit test. Например:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Обяснение:

• xrSession.requestHitTestSource(): Тази функция заявява източник за hit test от XR сесията.
• { space: xrSession.viewerSpace }: Това указва координатната система, в която ще бъдат върнати резултатите от hit test. viewerSpace е спрямо позицията на зрителя, докато local е спрямо началото на XR. Можете също да използвате localFloor за проследяване спрямо пода.
• Обработка на грешки: Блокът try...catch гарантира, че грешките по време на създаването на източника за hit test се улавят и записват.

2. Извършване на Hit Test в анимационния цикъл

Във вашия анимационен цикъл (функцията, която рендира всеки кадър), ще трябва да извършите hit test, като използвате метода XRFrame.getHitTestResults(). Този метод връща масив от XRHitTestResult обекти, представляващи всички намерени пресичания в сцената.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Обяснение:

• frame.getViewerPose(xrSession.referenceSpace): Взема позата на зрителя (очилата). Това е необходимо, за да се знае къде е зрителят и накъде гледа.
• frame.getHitTestResults(xrHitTestSource): Извършва hit test, използвайки предварително създадения източник за hit test.
• hitTestResults.length > 0: Проверява дали са намерени пресичания.

3. Обработка на резултатите от Hit Test

Функцията processHitTestResults() е мястото, където ще обработвате резултатите от hit test. Това обикновено включва актуализиране на позицията и ориентацията на виртуален обект въз основа на позата на точката на удар.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Обяснение:

• hitTestResults[0]: Извлича първия резултат от hit test. Ако са възможни няколко пресичания, може да се наложи да обходите целия масив и да изберете най-подходящия резултат въз основа на логиката на вашето приложение.
• hit.getPose(xrSession.referenceSpace): Взема позата на точката на удар в указаното референтно пространство.
• virtualObject.position.set(...) и virtualObject.quaternion.set(...): Актуализира позицията и ротацията (кватернион) на виртуален обект (напр. Mesh в three.js), за да съответстват на позата на точката на удар.
• Визуална обратна връзка: Примерът включва и код за показване на визуална обратна връзка в точката на удар, като кръг или обикновен маркер, за да помогне на потребителя да разбере къде взаимодейства със сцената.

Разширени техники за Hit Testing

Освен основния пример по-горе, има няколко разширени техники, които можете да използвате, за да подобрите вашите имплементации на hit testing:

Hit Testing с краткотрайно въвеждане

За взаимодействия, задействани от краткотрайно въвеждане, като натискане на бутони или жестове с ръце, можете да използвате метода XRSession.requestHitTestSourceForTransientInput(). Този метод създава източник за hit test, който е специфичен за едно събитие на въвеждане. Това е полезно за избягване на нежелани взаимодействия, базирани на непрекъснат hit testing.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Филтриране на резултатите от Hit Test

В някои случаи може да искате да филтрирате резултатите от hit test въз основа на специфични критерии, като разстоянието от началото на лъча или типа на пресечената повърхност. Можете да постигнете това, като ръчно филтрирате масива XRHitTestResult, след като го получите.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Използване на различни референтни пространства

Изборът на референтно пространство (viewerSpace, local, localFloor или други персонализирани пространства) значително влияе върху начина, по който се интерпретират резултатите от hit test. Обмислете следното:

• viewerSpace: Предоставя резултати спрямо позицията на зрителя. Това е полезно за създаване на взаимодействия, които са пряко свързани с погледа на потребителя.
• local: Предоставя резултати спрямо началото на XR (началната точка на XR сесията). Това е подходящо за създаване на преживявания, при които обектите остават фиксирани във физическата среда.
• localFloor: Подобно на local, но оста Y е подравнена с пода. Това опростява процеса на поставяне на обекти на пода.

Изберете референтното пространство, което най-добре отговаря на изискванията на вашето приложение. Експериментирайте с различни референтни пространства, за да разберете тяхното поведение и ограничения.

Стратегии за оптимизация на Hit Testing

Hit testing може да бъде изчислително интензивен процес, особено в сложни сцени. Ето някои стратегии за оптимизация, които да обмислите:

• Ограничете честотата на Hit Test-овете: Извършвайте hit test-ове само когато е необходимо, а не на всеки кадър. Например, можете да извършвате hit test-ове само когато потребителят активно взаимодейства със сцената.
• Използвайте йерархия на ограничителните обеми (BVH): Ако извършвате hit test-ове срещу голям брой обекти, обмислете използването на BVH за ускоряване на изчисленията за пресичане. Библиотеки като three.js и Babylon.js предоставят вградени BVH имплементации.
• Пространствено разделяне: Разделете сцената на по-малки региони и извършвайте hit test-ове само срещу регионите, които е вероятно да съдържат пресичания. Това може значително да намали броя на обектите, които трябва да се проверят.
• Намалете броя на полигоните: Опростете геометрията на вашите модели, за да намалите броя на полигоните, които трябва да се тестват. Това може да подобри производителността, особено на мобилни устройства.
• WebWorker: Прехвърлете изчисленията на web worker, за да гарантирате, че процесът на hit test не блокира основната нишка.

Съображения за междуплатформена съвместимост

WebXR има за цел да бъде междуплатформен, но може да има фини разлики в поведението на различните устройства и браузъри. Имайте предвид следното:

• Възможности на устройството: Не всички устройства поддържат всички функции на WebXR. Използвайте откриване на функции, за да определите кои функции са налични и адаптирайте приложението си съответно.
• Профили на въвеждане: Различните устройства могат да използват различни профили на въвеждане (напр. generic-touchscreen, hand-tracking, gamepad). Уверете се, че вашето приложение поддържа множество профили на въвеждане и предоставя подходящи резервни механизми.
• Производителност: Производителността може да варира значително при различните устройства. Оптимизирайте приложението си за най-ниския клас устройства, които планирате да поддържате.
• Съвместимост с браузъри: Уверете се, че вашето приложение е тествано и работи на основните браузъри като Chrome, Firefox и Edge.

Глобални примери за WebXR приложения, използващи Hit Testing

Ето някои примери за WebXR приложения, които ефективно използват hit testing за създаване на завладяващи и интуитивни потребителски преживявания:

• IKEA Place (Швеция): Позволява на потребителите виртуално да поставят мебели на IKEA в домовете си, използвайки AR. Hit testing се използва за точно позициониране на мебелите на пода и други повърхности.
• Sketchfab AR (Франция): Позволява на потребителите да разглеждат 3D модели от Sketchfab в AR. Hit testing се използва за поставяне на моделите в реалния свят.
• Augmented Images (Различни): Много AR приложения използват проследяване на изображения в комбинация с hit testing, за да закотвят виртуално съдържание към конкретни изображения или маркери в реалния свят.
• WebXR игри (Глобално): Разработват се множество игри, използващи WebXR, много от които разчитат на hit testing за поставяне на обекти, взаимодействие и навигация.
• Виртуални обиколки (Глобално): Потапящите обиколки на места, музеи или имоти често използват hit testing за навигация на потребителя и интерактивни елементи във виртуалната среда.

Заключение

Овладяването на резултатите от WebXR hit test и обработката на ray casting е от съществено значение за създаването на завладяващи и интуитивни AR и VR преживявания в уеб. Като разбирате основните концепции и прилагате техниките, описани в тази блог публикация, можете да изграждате потапящи приложения, които безпроблемно смесват виртуалния и реалния свят, или да създавате ангажиращи виртуални среди с естествени и интуитивни потребителски взаимодействия. Не забравяйте да оптимизирате вашата имплементация на hit testing за производителност и да вземете предвид междуплатформената съвместимост, за да осигурите гладко преживяване за всички потребители. Тъй като екосистемата на WebXR продължава да се развива, очаквайте по-нататъшни подобрения и усъвършенствания на hit testing API, които ще отворят още по-креативни възможности за разработка на потапящ уеб. Винаги се консултирайте с най-новите спецификации на WebXR и документацията на браузърите за най-актуална информация.